<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('省份联动')"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
       <blockquote class="layui-elem-quote">
           <strong>说明!</strong>&nbsp;&nbsp; 为了节约数据内存， t_sys_province 省份 t_sys_city 市 t_sys_area 区 t_sys_street 街道 表数据不全，请自行在码云下载4张表的全部数据 <a href="https://gitee.com/bdj/SpringBoot_v2/attach_files">点我下载</a>
       </blockquote>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" onsubmit="return false">
          <div class="layui-form-item">
            <label class="layui-form-label">省份</label>
            <div class="layui-input-block">
              <select name="qytt" lay-verify="required" lay-filter="province_select" lay-search="" id="province_select">
                <option value=""></option>
                <option th:each="list : ${provinceList}" th:text="${list.provinceName}" th:value="${list.provinceCode}">First</option>
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">城市</label>
            <div class="layui-input-block">
              <select name="x3ppx" lay-filter="city_select" lay-verify="required" lay-search=""  id="city_select">
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">区县</label>
            <div class="layui-input-block">
              <select name="mm4es" lay-filter="area_select" lay-verify="required" lay-search=""  id="area_select" >
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">街道</label>
            <div class="layui-input-block">
              <select name="jmobv" lay-verify="required" lay-search=""  id="street_select">
              </select>
            </div>
          </div>
        </form>
    </div>
</div>
</body>


<th:block th:include="include :: footer"/>
<script>

//城市查询
function cityList(){

}

//区县查询
function areaList(){

}

//街道查询
function streetList(){

}


</script>
<script>
    layui.use(['form','jquery'], function () {
        let $ = layui.jquery;
        let form = layui.form;
        let MODULE_PATH = rootPath+"/SysProvinceController/";

        form.on('select(province_select)', function(data){
            $("#city_select").empty();
            $("#city_select").html("<option></option>");
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: rootPath+"/ProvinceLinkageController/getCity?pid="+$("#province_select").val(),
                success:function(data){
                  for (var i = 0; i < data.length; i++) {
                      $("#city_select").append("<option value='"+data[i].cityCode+"'>"+data[i].cityName+"</option>");
                  }
                  form.render('select');
                }
            })

        });

        form.on('select(city_select)', function(data){
          $("#area_select").empty();
          $("#area_select").html("<option></option>");
          $.ajax({
              type: 'get',
              dataType: 'json',
              url: rootPath+"/ProvinceLinkageController/getArea?pid="+$("#city_select").val(),
              success:function(data){
                for (var i = 0; i < data.length; i++) {
                    $("#area_select").append("<option value='"+data[i].areaCode+"'>"+data[i].areaName+"</option>");
                }
                 form.render('select');
              }
          })

        });

        form.on('select(area_select)', function(data){
            $("#street_select").empty();
            $("#street_select").html("<option></option>");
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: rootPath+"/ProvinceLinkageController/getStreet?pid="+$("#area_select").val(),
                success:function(data){
                  for (var i = 0; i < data.length; i++) {
                      $("#street_select").append("<option value='"+data[i].streetCode+"'>"+data[i].streetName+"</option>");
                  }
                   form.render('select');
                }
            })
        });

    })
</script>
</html>